<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul class="ul">
    <li id="li1">111111</li>
    <li id="li2">222222</li>
    <li id="li3">333333</li>
    <li id="li4">444444</li>
</ul>

只需要在ul上写一个事件就能监听都儿子的点击事件
<script>
    /*
        事件委托
            - 
     */
    const theDom = document.querySelector('.ul')
    theDom.addEventListener('click', (e) => {
        const {target} = e
        console.log([target],target.id)
        switch (target.id) {
            case 'li1':
                target.style.backgroundColor = 'pink'
                break;
            case 'li2':
                target.style.backgroundColor = 'blue'
                break;
            case 'li3':
                target.style.backgroundColor = 'yellow'
                break;
            case 'li4':
                target.style.backgroundColor = 'green'
                break;
            default:
                console.log('别吓点');
                break;
        }
        setTimeout(() =>{
            target.style.backgroundColor = '#ffffff'
        },1000)
    })
</script>
</body>
</html>